<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>Title</title>
    <link rel="stylesheet"
          href="${ctxPath}/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="${ctxPath}/static/font-awesome-4.7.0/css/font-awesome.min.css">
    <style type="text/css">
        ul.list-row li {
            border: 1px solid #337ab7;
            width: 220px;
            padding: 10px 15px;
            float: left;
            border-radius: 5px;
            margin: 5px;
            list-style: none;
        }
        ul.list-row li:hover{
            background: lightyellow;
        }
        ul.list-row li a, ul.list-row li a:hover, ul.list-row li a:visited, ul.list-row li a:active,
        ul.list-row li a:link {
            text-decoration: none;
        }

        ul.list-row li:hover {
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="container-fluid" >
    <div class="row">
        <ul class="list-row" id="listbox">
        </ul>
    </div>
</div>


<script type="text/javascript"
        src="${ctxPath}/static/jquery-2.1.4/jquery.min.js"></script>
<script type="text/javascript"
        src="${ctxPath}/static/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript"
        src="${ctxPath}/static/util.js"></script>
<script type="text/javascript">
    $(function(){
        var objs=[{
            "iconCls":'fa fa-tencent-weibo fa-3x',
            "name":"easyicon图标库",
            "url":"https://www.easyicon.net/"
        },{
            "iconCls":'fa fa-podcast fa-3x',
            "name":"fontawesome图标库",
            "url":"http://www.fontawesome.com.cn/faicons/"
        },{
            "iconCls":'fa fa-eercast  fa-3x',
            "name":"cron生成工具",
            "url":"http://www.pppet.net/"
        },{
            "iconCls":'fa fa-telegram  fa-3x',
            "name":"百度地图接入",
            "url":"http://lbsyun.baidu.com/"
        },{
            "iconCls":'fa fa-american-sign-language-interpreting  fa-3x',
            "name":"菜鸟教程",
            "url":"http://www.runoob.com/"
        },{
            "iconCls":'fa fa-car fa-3x',
            "name":"Hutool WikiV4",
            "url":"http://hutool.mydoc.io/"
        },{
            "iconCls":'fa fa-bar-chart fa-3x',
            "name":"zheng",
            "url":"https://gitee.com/shuzheng/zheng"
        },{
            "iconCls":'fa fa-quora fa-3x',
            "name":"jquery api",
            "url":"http://jquery.cuishifeng.cn/"
        },{
            "iconCls":'fa fa-window-restore fa-3x',
            "name":"shiro-cas",
            "url":"https://www.cnblogs.com/coderhuang/p/5897444.html"
        }];

        for(var i=0;i<objs.length;i++){
            var obj=objs[i];
            var html=' <li onclick="openNewWin(\''+obj.url+'\')"><a href="javascript:;"><i '
                + 'class="'+obj.iconCls+'" style="color: #337ab7"></i> '+obj.name+'</a></li>';
            $('#listbox').append(html);

        }
    })

    function openNewWin(url){
        var a=document.createElement('a');
        $(a).attr('href',url);
        $(a).css('display','none');
        $(a).attr('target','_blank');
        document.body.appendChild(a);
        a.click();
    }
</script>
</body>
</html>